<template>
  <!--<basic-container>-->
  <div class="container">
    <div class="search" v-show="showSearch">
      <FormSearch
        :searchformConfig="searchformConfig"
        @handleQueryClick="handleQueryClick"
        @handleResetClick="handleResetClick"
      />
    </div>
    <div class="vxe-custom-table">
      <vxe-toolbar custom refresh ref="toolbarRef">
        <template #buttons>
          <el-button type="primary" icon="Plus" @click="handleAdd"> 新增 </el-button>
        </template>
        <template #tools>
          <vxe-button circle icon="vxe-icon-search" @click="showSearch = !showSearch" class="mr" />
        </template>
      </vxe-toolbar>
      <vxe-table
        border
        stripe
        height="100%"
        ref="xTable"
        show-overflow
        :scroll-x="{ enabled: true }"
        :scroll-y="{ enabled: true }"
        :loading="loading"
        :column-config="{ resizable: true }"
        :row-config="{ isHover: true, isCurrent: true, height: 36 }"
        :checkbox-config="{ highlight: true, range: true }"
        @menu-click="contextMenuClickEvent"
        :data="data"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column
          field="custName"
          title="客户名称"
          sortable
          show-overflow
          width="220"
          :filters="custNameOption"
          :filter-render="{ name: 'FilterInput' }"
        ></vxe-column>
        <vxe-column
          field="custNameEn"
          title="英文名称"
          sortable
          show-overflow
          width="220"
          :filters="custNameEnOption"
          :filter-render="{ name: 'FilterInput' }"
        ></vxe-column>
        <vxe-column field="custType" title="客户类别" sortable show-overflow width="100">
          <template #default="{ row }">
            <div v-for="(item, index) in customerTypeList" :key="index">
              <el-tag v-if="row.custType === item.dictKey">{{ item.dictValue }}</el-tag>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          field="custAddr"
          title="客户地址"
          sortable
          show-overflow
          width="220"
        ></vxe-column>
        <vxe-column field="stopTrading" title="停止交易" sortable show-overflow width="100">
          <template #default="{ row }">
            <div v-for="(item, index) in yesNoList" :key="index">
              <el-tag v-if="row.stopTrading === item.dictKey">{{ item.dictValue }}</el-tag>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          field="creditLimit"
          title="信用额度"
          sortable
          show-overflow
          width="100"
        ></vxe-column>
        <vxe-column
          field="paymentTerms"
          title="付款条件"
          sortable
          show-overflow
          width="220"
        ></vxe-column>
        <vxe-column field="tansportTreaty" title="运输条约" sortable show-overflow width="200">
          <template #default="{ row }">
            <div v-for="(item, index) in tansportTreatyList" :key="index">
              <el-tag v-if="row.tansportTreaty === item.dictKey">{{ item.dictValue }}</el-tag>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          field="createUserName"
          title="创建人员"
          sortable
          show-overflow
          width="120"
        ></vxe-column>
        <vxe-column
          field="createTime"
          title="创建时间"
          sortable
          show-overflow
          width="160"
        ></vxe-column>
        <vxe-column title="操作" fixed="right" align="center" width="120">
          <template #default="{ row }">
            <el-tooltip content="修改" placement="top">
              <el-button type="primary" icon="el-icon-view" link @click="handleView(row)">
              </el-button>
            </el-tooltip>
            <el-tooltip content="修改" placement="top">
              <el-button type="primary" icon="el-icon-edit" link @click="handleEdit(row)">
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button @click="handleDelete(row)" type="danger" icon="el-icon-delete" link>
              </el-button>
            </el-tooltip>
          </template>
        </vxe-column>

        <!--<vxe-column field="sex" title="Sex" sortable show-overflow :filters="sexOptions" :filter-multiple="false"-->
        <!--:formatter="formatterSex"></vxe-column>-->
        <!--<vxe-column field="age" title="Age" sortable show-overflow :filters="ageOptions"-->
        <!--:filter-method="filterAgeMethod"></vxe-column>-->
        <!--<vxe-column field="address" title="Address" sortable show-overflow></vxe-column>-->
      </vxe-table>
      <vxe-pager
        :loading="loading"
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :total="page.total"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </div>
  </div>

  <!--</basic-container>-->
</template>

<script>
import { getList, getDetail, add, update, remove } from '@/api/anwise/customer/customer';
import { customerInfo } from '@/const/anwise/customer/customer';
import { mapGetters } from 'vuex';
import { getDictionary } from '@/api/system/dictbiz';
import { setStore, getStore } from '@/utils/store';
import '@/components/vxe-filters/filterbck.tsx';
import $Mode from '@/mac/mode/index';
export default {
  data() {
    return {
      tableName: 'customer_table',
      defaults: {},
      customerInfo: customerInfo,
      form: {},
      query: {},
      loading: true,
      data: [],
      selectionList: [],
      dateFormat: 'YYYY-MM-DD',
      pickerOptions: {},
      menuConfig: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      customerTypeList: [],
      yesNoList: [],
      tansportTreatyList: [],
      search: {},
      customerId: 0,
      customerName: '安伟客户表',
      custNameOption: [{ data: null }],
      custNameEnOption: [{ data: null }],
      custTypeOption: [{ data: { vals: [], sVal: '' }, valList: this.customerTypeList }],
      showSearch: true,
      searchEnter:true,
      searchformConfig: {
        labelWidth: '100px',
        formItems: [
          {
            field: 'custName',
            type: 'input',
            label: '客户名称',
            placeholder: '请输入',
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.customer_add, false),
        viewBtn: this.validData(this.permission.customer_view, false),
        delBtn: this.validData(this.permission.customer_delete, false),
        editBtn: this.validData(this.permission.customer_edit, false),
      };
    },
  },
  mounted() {
    this.initDict();
    this.menuConfig = {
      header: {
        options: [
          [
            { code: 'hideColumn', name: '隐藏列', disabled: false },
            { code: 'showAllColumn', name: '取消所有隐藏列', disabled: false },
            { code: 'fixedColumn', name: '固定列', disabled: false },
            { code: 'clearFixed', name: '取消固定列', disabled: false },
          ],
        ],
      },
      body: {
        options: [
          [
            {
              code: 'copy',
              name: '复制',
              prefixIcon: 'vxe-icon-copy',
              disabled: false,
            },
            // { code: 'reload', name: '刷新', disabled: false },
            // { code: 'insertAt', name: '插入', disabled: false },
            // { code: 'remove', name: '删除', disabled: false },
            // {
            //   code: 'save',
            //   name: '保存',
            //   prefixIcon: 'vxe-icon-save',
            //   disabled: false,
            // },
          ],
        ],
      },
      visibleMethod({ options, column }) {
        const isDisabled = !column;
        options.forEach(list => {
          list.forEach(item => {
            item.disabled = isDisabled;
          });
        });
        return true;
      },
    };

    this.$nextTick(() => {
      this.$refs.xTable.connect(this.$refs.toolbarRef);
    });
    this.onLoad(this.page);
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    contextMenuClickEvent(data) {
      const menu = data.menu;
      const row = data.row;
      const column = data.column;
      const $table = this.$refs.tableRef;
      if ($table) {
        switch (menu.code) {
          case 'hideColumn':
            $table.hideColumn(column);
            break;
          case 'showAllColumn':
            $table.resetColumn(true);
            break;
          case 'fixedColumn':
            $table.setColumnFixed(row, 'left');
            break;
          case 'clearFixed':
            $table.clearColumnFixed(row);
            break;
          case 'copy':
            // if (XEClipboard.copy(row[column.field])) {
            //   ElMessage.success('保存成功')
            // }
            // ElMessage.success('复制成功')
            break;
          case 'reload':
            //  findList()
            break;
          case 'insertAt':
            $table.insertAt({}, row || -1).then(({ row }) => {
              $table.setEditCell(row, column || 'name');
            });
            break;
          case 'remove':
            $table.remove(row);
            break;
          case 'save':
            // ElMessage.success('保存成功')
            break;
        }
      }
    },
    initDict() {
      getDictionary({ code: 'customer_type' }).then(res => {
        this.customerTypeList = res.data.data;
      });
      getDictionary({ code: 'biz_yes_no' }).then(res => {
        this.yesNoList = res.data.data;
      });
      getDictionary({ code: 'tansport_treaty' }).then(res => {
        this.tansportTreatyList = res.data.data;
      });
    },
    handleAdd() {
      if (this.$store.getters.isMacOs) {
        $Mode({
          title: '新增客户',
          path: '/anwise/customer/customer_form',
        });
      } else {
        this.$router.push({ path: `/anwise/customer/customer_form` });
      }
    },
    handleView(row) {
      if (this.$store.getters.isMacOs) {
        $Mode({
          title: '客户详情',
          path: '/anwise/customer/customer_edit?customerId=' + row.id,
        });
      } else {
        this.$router.push({
          path: `/anwise/customer/customer_edit`,
          query: { customerId: row.id },
        });
      }
    },
    handleEdit(row) {
      if (this.$store.getters.isMacOs) {
        $Mode({
          title: '客户详情',
          path: '/anwise/customer/customer_edit?customerId=' + row.id,
        });
      } else {
        this.$router.push({
          path: `/anwise/customer/customer_edit`,
          query: { customerId: row.id },
        });
      }
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$refs.crud.toggleSelection();
        });
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    handleQueryClick(value) {
      this.query = { ...value };
      this.$nextTick(() => {
        this.onLoad(this.page);
      });
    },
    handleResetClick(value) {
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      };
      this.query = {};
      this.onLoad(this.page);
    },
  },
};
</script>

<style scoped lang="scss">
.vxe-table {
  .vxe-table__body-wrapper {
    overflow-x: scroll !important; //直接设置横轴内容滚动条 即可撑高高度 还不影响使用
  }
  height: 100% !important;
  .avue-crud--card {
    height: 100% !important;
  }
  .vxe-card {
    height: 100% !important;
  }
  /*.el-form{*/
  /*    height:100% !important;*/
  /*}*/
  .vxe-table {
    height: calc(100% - 25px) !important;
  }
}
.container {
  height: 100%;
}
.search {
  background: white;
  box-sizing: border-box;
  margin: 0px 8px;
  padding-top: 20px;
  // margin: auto;
}
.mr {
  margin-right: 0.8em;
}
</style>
